<template>
  <div class="pages-index">
    <div class="center">
      <div @click="centerClick" style="position:absolute;width:300px;height:300px;border-radius:300px;margin-top:20px;cursor:pointer;z-index:100000;"></div>
      <img src="../../assets/image/index/center-ball.png" />
      <div class="center-rotate">
        <rotate duration="10s"><img src="../../assets/image/index/center-rotate.png" /></rotate>
      </div>
      <!-- <img class="logo" src="../../assets/image/index/logo.png" /> -->
      <div class="data">2875万+</div>
      <div class="line-dance-p">
        <div class="line-dance-p--left"><line-dance width="200px" height="100px" :danceLineCount="5" :space="20" :lineWidth="3"></line-dance></div>
        <div class="line-dance-p--right"><line-dance width="200px" height="100px" :danceLineCount="5" :space="20" :lineWidth="3"></line-dance></div>
      </div>
      <div class="wg">
        <scale-dance :from="logoMask.from" :to="logoMask.to" :duration="logoMask.duration"><img src="../../assets/image/index/wg.png" /></scale-dance>
      </div>
    </div>
    <div class="bottom">
      <div :class="classArr[0]" @click="clickHandler('yd')">
        <img src="../../assets/image/index/ball.png" />
        <div :class="[`${classArr[0]}__bg`]">
          <rotate duration="20s"><img src="../../assets/image/index/ball-bg.png" /></rotate>
        </div>
        <div :class="[`${classArr[0]}__title`]">移动</div>
        <div :class="[`${classArr[0]}__value`]">904万+</div>
        <div :class="[`${classArr[0]}__mask`]">
          <scale-dance :to="0.95"><img src="../../assets/image/index/ball-mask.png" /></scale-dance>
        </div>
      </div>
      <div :class="classArr[1]" @click="clickHandler('lt')">
        <img src="../../assets/image/index/ball.png" />
        <div :class="[`${classArr[1]}__bg`]">
          <rotate duration="20s"><img src="../../assets/image/index/ball-bg.png" /></rotate>
        </div>
        <div :class="[`${classArr[1]}__title`]">联通</div>
        <div :class="[`${classArr[1]}__value`]">216万+</div>
        <div :class="[`${classArr[1]}__mask`]">
          <scale-dance :to="0.95"><img src="../../assets/image/index/ball-mask.png" /></scale-dance>
        </div>
      </div>
      <div :class="classArr[2]" @click="clickHandler('dx')">
        <img src="../../assets/image/index/ball.png" />
        <div :class="[`${classArr[2]}__bg`]">
          <rotate duration="20s"><img src="../../assets/image/index/ball-bg.png" /></rotate>
        </div>
        <div :class="[`${classArr[2]}__title`]">电信</div>
        <div :class="[`${classArr[2]}__value`]">1705万+</div>
        <div :class="[`${classArr[2]}__mask`]">
          <scale-dance :to="0.95"><img src="../../assets/image/index/ball-mask.png" /></scale-dance>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PagesIndex",
  data() {
    return {
      logoMask: {
        from: 1,
        to: 0.95,
        duration: "5s"
      },
      classArr: ["bottom--left", "bottom--center", "bottom--right"]
    }
  },
  mounted() {
    this.registerLogoMaskDance();
    this.registerThreeBallRotate();
  },
  methods: {
    registerLogoMaskDance() {
      setTimeout(_ => {
        Object.assign(this.logoMask, {
          from: 1.3,
          to: 0.7,
          duration: "0.3s"
        });
        setTimeout(_ => {
          Object.assign(this.logoMask, {
            from: 1,
            to: 0.95,
            duration: "5s"
          });
          this.registerLogoMaskDance();
        }, 500);
      }, 10000);
    },
    registerThreeBallRotate() {
      setInterval(_ => {
        const arr = [], len = this.classArr.length;
        arr[0] = this.classArr[len - 1];
        for (let i = 1; i < len; i++) {
          arr[i] = this.classArr[i - 1];
        }
        this.classArr = arr;
      }, 8000)
    },
    centerClick() {
      this.$router.push({name: 'UserDevelopment'})
    },
    clickHandler(type) {
      this.$router.push({name: 'UserAnalysis', query: {type: type}})
    }
  }
}
</script>

<style lang="less" scoped>
@import "./style.less";
</style>